<template>
  <div class="app">
    <h1>{{ msg }}----{{ title }}</h1>
    <button @click="changeMsg">changeMsg</button>
  </div>
</template>
<script>
// reactive 可以用于定义对象和数组
// import { reactive, toRefs, toRef } from 'vue';
import { reactive, toRef } from 'vue';
export default {
  setup() {
    // 使用reactive 把普通的对象变成响应式的
    const data = reactive({
      msg: 'hello vue',
      title: '标题',
    });

    // 因为解构的时候数据又变成普通的对象，所有需要使用 toRefs 重新设置为响应式的
    // const { msg, title } = toRefs(data);
    const msg = toRef(data, 'msg');
    const changeMsg = () => {
      data.msg = '更新了';
      console.log(data.msg);
    };
    return {
      // ...data,
      msg,
      // title,
      changeMsg,
    };
  },
};
</script>
<style lang="scss" scoped></style>
